后台iframe适应网页及跳转 | 豆豆

做后台的时候接触到iframe，写了一个非常简单的跳转方法，Mark方便以后用~

(≖ ‿ ≖)✧

一、iframe适应网页

1.iframe代码

<iframe src="进入后台显示的网页" frameborder="0"  id="iframeid_admin" onload="Javascript:SetiframeHeight()" width="100%"></iframe>

2.JS代码 获取当前网页高度适应

function SetiframeHeight(){
  var iframeid=document.getElementById("iframeid_admin"); //iframe id
  if (document.getElementById){
   if (iframeid && !window.opera){
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
     iframeid.height = iframeid.contentDocument.body.offsetHeight+100;
    }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
     iframeid.height = iframeid.Document.body.scrollHeight+100;
    }
   }
  }
 }

ps:适应了之后，假如跳转的网页高度小于后台高度，底部可能会留白，但是不影响使用~

---

二、iframe跳转

1.思路

点击获取自定义属性的值（如：data-url中放网页地址）
把获取到的地址放入iframe的src
实现跳转（超简单）

2.链接代码

<li class="layui-nav-item"><a data-url="/copy.php" onclick="javascript:targetPage(this);" href="javascript:;">关于</a></li>

3.JS代码获取id跳转

function targetPage(e){
  var url=$(e).attr("data-url"); //获取URL
  $('#iframeid_admin').attr('src',url); //赋值 跳走
}

转载请遵循 协议许可
本文所有内容严禁任何形式的盗用
本文作者：Amos
本文链接：https://amoshk.top/Layui iframe/